<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>Webpack-URL加载器</h1>
      <p>Data URLs(base 64方案) 与 url-loader</p>
      <p>例如吧图片转换成base64,取代file-loader</p>
      <p>yarn add url-loader --dev</p>
      <p>可以配置超出大小不使用该方式打包</p>
      <p>在module属性里面的rules属性的里面use属性的里面</p>
      <p>
        module:{ relus:[ { test: /.jpg$/, use: { loader: 'url-loader', options:
        { limit:10 * 1024 } } }] }
      </p>
      <p>超出10kb文件单独提取存放</p>
      <p>小于10kb文件转换为Data URLs嵌入代码中</p>
      <p>如果使用这种方式必须需要先安装file-loader</p>
    </div>
    <div>
      <h2>最佳实现方案</h2>
      <p>小文件使用Data URLs,减少请求次数</p>
      <p>大文件单独提取存放,提高加载速度</p>
    </div>
    <script></script>
  </body>
</html>
